<template>

  <user-card-list :user-list="userList" :loading="loading"/>
  <van-empty v-if="!userList||userList.length<1" description="请求数据为空"/>


</template>

<script setup>

import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import  myAxios from "../plugins/myAxios.ts";
import {showFailToast, showSuccessToast} from "vant";
import qs from 'qs'

const route = useRoute();
const {tags} = route.query;
const loading = ref(false);

const userList = ref([]);

onMounted(async ()=>{
  loading.value = true;
  // 为给定 ID 的 user 创建请求
  const userListData = await myAxios.get('/user/search/tags', {
    params: {
      tagNameList: tags
    },
    paramsSerializer: {
      serialize: params => qs.stringify(params, { indices: false}),
    }

  })
      .then(function (response) {
        console.log('/user/search/tags succeed',response);
        //showSuccessToast('请求成功');
        return response?.data;  //返回数据  ?.  可选链操作符，避免数据数据为空
      })
      .catch(function (error) {
        console.log('/user/search/tags error',error);
        showFailToast('请求失败');
      });

  //console.log('userListData', userListData);

  if (userListData){
    userListData.forEach(user =>{
      if (user.tags){
        //把json字符串转化成js数组
        user.tags = JSON.parse(user.tags);
      }
    })
    userList.value = userListData;
  }

  loading.value = false;

})








</script>

<style scoped>

</style>